<template>
  <swiper
    :modules="modules"
    :loop="true"
    :slides-per-view="1"
    :space-between="50"
    
  >
    <swiper-slide
      v-for="item in bannerStore.bannerList"
      :key="item.targetId"
      @click="clickBanner(item.targetId)"
    >
      <div
        class="carousel rounded-box w-full 2xl:carousel xl:carousel lg:carousel md:carousel-md"
      >
        <div class="carousel-item w-full">
          <img :src="item.imageUrl" class="w-full" />
        </div>
      </div>
    </swiper-slide>
    <div class="swiper-button-next">
      <a class="btn btn-circle">❯</a>
    </div>
    <div class="swiper-button-prev">
      <a class="btn btn-circle">❮</a>
    </div>
  </swiper>
</template>

<script setup lang="ts">
  // 引入swiper组件
  import { Swiper, SwiperSlide } from "swiper/vue";
  // 引入swiper样式（按需导入）
  import "swiper/css";
  import "swiper/css/pagination"; // 轮播图底面的小圆点
  import "swiper/css/navigation"; // 轮播图两边的左右箭头
  // 引入swiper核心和所需模块
  import { Autoplay, Pagination, Navigation, Scrollbar } from "swiper";
  //状态管理工具
  import { useBannerStore } from "../../store/banner";
  import { onMounted } from "vue";
  const bannerStore = useBannerStore();
  // 在modules加入要使用的模块
  const modules = [Autoplay, Pagination, Navigation, Scrollbar];
  onMounted(() => {
    bannerStore.actionBanner();
  });
  //banner点击事件
  const clickBanner = (id: string) => {
    console.log(id);
  };
</script>

<style scoped lang="scss">
  .swiper-button-next,
  .swiper-button-prev {
    &::after {
      display: none;
    }
  }
</style>
